<template>
  <div class="shopdetail_container">
    <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
      <van-swipe-item v-for="(item, index) in shopdetail.pics2" :key="index">
        <img :src="item" alt="" width="100%" height="100%" />
      </van-swipe-item>
    </van-swipe>

    <div class="shopdetail_title">
      <p class="shopdetail_title_one">
        {{ shopdetail.basicInfo.name }}
      </p>
      <p class="shopdetail_title_two">
        {{ shopdetail.basicInfo.characteristic }}
      </p>
      <p class="shopdetail_title_three">
        低价￥{{ shopdetail.basicInfo.minPrice }}
      </p>
    </div>

    <div class="shopdetail_color"></div>

    <div class="shopdetail_content">
      <div class="shopdetail_content_active">商品介绍</div>
      <div>商品评价</div>
    </div>
    <div class="shopdetail_introduce" v-html="shopdetail.content"></div>

    <van-goods-action>
      <van-goods-action-icon icon="chat-o" text="客服" color="#07c160" />
      <van-goods-action-icon icon="cart-o" text="购物车" />
      <van-goods-action-icon icon="star" text="已收藏" color="#ff5000" />
      <van-goods-action-button type="warning" text="加入购物车" @click="push" />
      <van-goods-action-button type="danger" text="立即购买" />
    </van-goods-action>

    <van-popup v-model="show" position="bottom" :style="{ height: '50%' }">
      <div
        class="shop_detail_popup"
        v-for="(item, index) in shopdetail.pics2.slice(1, 2)"
        :key="index"
      >
        <div class="shop_detail_popup_left">
          <img :src="item" alt="" />
        </div>
        <div class="shop_detail_popup_right">
          <p class="shop_detail_popup_right_one">
            {{ shopdetail.basicInfo.characteristic }}
          </p>
          <p class="shop_detail_popup_right_two">
            ￥{{ shopdetail.basicInfo.minPrice }}
          </p>
        </div>
      </div>

      <div class="shop_detail_size">
        <div
          class="shop_detail_size_inner"
          v-for="(item, index) in shopdetail.properties"
          :key="index"
        >
          <div class="shop_detail_size_inner_top">
            <p class="shop_detail_size_inner_top_text">{{ item.name }}</p>
          </div>
          <div
            v-for="(itex, index) in item.childsCurGoods"
            :key="index"
            class="shop_detail_size_inner_bottom"
          >
            <div class="size_inner_container">{{ itex.name }}</div>
          </div>
        </div>
      </div>

      <div class="shop_detail_num">
        <div>数量</div>
        <div>
          <van-stepper v-model="value" @plus="plusvalue" @minus="minusvalue" />
        </div>
      </div>

      <div class="shop_detail_button" @click="add">加入购物车</div>
    </van-popup>
  </div>
</template>

<script>
export default {
  data() {
    return {
      shopdetail: [],
      shopdetails: [],
      show: false,
      value: 1,
      num: 1,
      // cart: [],c
      // list:[]
    };
  },
  mounted() {
    var id = this.$route.query.id;
    this.$API.getshopdetail(id).then((res) => {
      console.log(res);
      this.shopdetail = res.data.data;
      this.shopdetails = res.data.data;
    });

    // this.$API.getList().then((res) => {
    //   console.log(res);
    //   this.list = res.data.data;
    // });
  },
  methods: {
    push() {
      console.log(111);
      this.show = true;
    },
    add() {
      // this.$router.push({
      //   path: "/cart",
      //   query: {
      //     shopdetail: this.shopdetail,
      //   },
      // });

      if (localStorage.getItem("token")) {
        this.$store.commit("add", this.shopdetail);
        this.$router.push({
          path: "/cart",
          query: {
            shopdetail: this.$store.state.shopdetail,
          },
        });
      }else {
        alert("请先登录")
        this.$router.push("/login")
        return
      }
      console.log(this.$store.state.shopdetail);
    },
    plusvalue() {
      this.num++;
    },
    minusvalue() {
      this.num--;
      if (this.num < 0) {
        this.num = 1;
      }
    },
  },
};
</script>

<style scoped>
.shopdetail_container {
  width: 100%;
}
.my-swipe .van-swipe-item {
  color: #fff;
  font-size: 20px;
  /* line-height: 150px; */
  text-align: center;
  /* background-color: #39a9ed; */
}
.van-swipe-item img {
  width: 100%;
  height: 7.5rem;
}
.shopdetail_title {
  width: 100%;
  height: 2rem;
  /* background-color: red; */
  overflow: hidden;
}
.shopdetail_title p {
  margin-top: 0.2rem;
  margin-left: 0.3rem;
}
.shopdetail_title_two {
  font-size: 0.25rem;
  color: rgb(204, 200, 200);
}
.shopdetail_title_three {
  color: red;
  font-size: 0.27rem;
}
.shopdetail_color {
  width: 100%;
  height: 0.3rem;
  background-color: rgb(238, 237, 237);
}
.shopdetail_content {
  width: 100%;
  height: 1rem;
  /* background-color: aqua;  */
  display: inline-flex;
}
.shopdetail_content div {
  width: 50%;
  height: 1rem;
  text-align: center;
  line-height: 1rem;
}
.shopdetail_content .shopdetail_content_active {
  border-bottom: 2px solid red;
}
.shopdetail_introduce {
  width: 100%;
  margin-top: 0.2rem;
}
.shop_detail_popup {
  width: 100%;
  height: 100px;
  display: flex;
}
.shop_detail_popup_left img {
  width: 80px;
  height: 80px;
}
.shop_detail_popup_left {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.shop_detail_popup_right p {
  margin-top: 20px;
  margin-left: 10px;
}
.shop_detail_popup_right_two {
  color: red;
}
.shop_detail_size {
  width: 100%;
  height: 150px;
  overflow: hidden;
}
.shop_detail_size_inner_top {
  width: 100%;
  height: 50%;
  margin-top: 20px;
}
.shop_detail_size_inner_bottom {
  display: inline-flex;
  margin-top: 20px;
}
.shop_detail_size_inner_top_text {
  margin-left: 10px;
}
.size_inner_container {
  width: 110px;
  height: 30px;
  text-align: center;
  border: 1px solid rgb(218, 215, 215);
  line-height: 30px;
  margin-left: 10px;
}
.shop_detail_num {
  width: 100%;
  height: 100px;
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  box-sizing: border-box;
  padding: 0px 10px;
}
.shop_detail_button {
  width: 100%;
  height: 55px;
  color: white;
  text-align: center;
  line-height: 55px;
  background-color: rgb(179, 6, 6);
}
</style>